<template>
  <section class="recognize">
    <p class="price">{{recognize.begin_time_text}} - {{recognize.end_time_text}}</p>
    <p class="price">单价: ￥{{recognize.price}}</p>
    <div class="recognize-info">
      <div class="recognize-item">
        <p>总发行数量</p>
        <p>{{recognize.total}}</p>
      </div>
      <div class="recognize-item">
        <p>剩余认购数量</p>
        <p>{{recognize.residue}}</p>
      </div>
    </div>
    <x-input type="number" v-model="recognizeNum" placeholder="输入认筹数量"></x-input>
    <div class="btn-box">
      <x-button :gradients="buttonColor" @click.native="doRecognize">确认认筹</x-button>
    </div>
  </section>
</template>

<script>
  import {XInput, Group, XButton} from 'vux'

  export default {
    name: 'Recognize',
    components: {
      XInput,
      Group,
      XButton
    },
    computed: {
    },
    data () {
      return {
        buttonColor: ['#1D62F0', '#19D5FD'],
        recognize: {},
        recognizeNum: '',
        pwd: ''
      }
    },
    created () {
      // 初始化
      this.init()
    },
    methods: {
      init () {
        this.getInfo()
      },
      getInfo () {
        let vue = this
        vue.get({
          url: '/api/index/get_chip',
          success: function (data) {
            // console.log(data.data)
            vue.recognize = data.data
          }
        })
      },
      doRecognize () {
        let vue = this
        if (!vue.recognizeNum) {
          this.$vux.toast.show({
            text: '请输入认筹数量',
            type: 'warn',
            position: 'middle'
          })
          return false
        }
        let params = {
          chip_id: vue.recognize.id,
          chip_num: vue.recognizeNum,
          pay_password: vue.pwd
        }
        console.log(params)
      }
    }
  }
</script>

<style lang="less" scoped>
  .recognize {
    height: 100%;
    background-color: #fff;
    text-align: center;
    .price {
      padding: 15px 15px 0;
    }
    .recognize-info {
      display: flex;
      justify-content: space-between;
      .recognize-item {
        flex-grow: 1;
        padding: 15px;
      }
    }
    .btn-box {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 15px;
      box-sizing: border-box;
    }
  }
</style>
